<template>
  <div class="body">
    <SongTable :table-data="songs" v-loading="loading" element-loading-background="transparent"/>
  </div>
</template>
<script setup lang="ts" name="SearchSongs">
import {search} from '@/assets/apis/http'
import {Song} from '@/assets/apis/MusicDataType'
import { reactive, watch, ref } from "vue"
import util from "@/tools/util";

const props = defineProps<{
  keywords: string;
}>();

//将歌曲初始化为具有特定类型的响应数组
let songs = reactive<Song[]>([]);
let loading = ref(false);

async function getList(keywords: string) {
  loading.value = true;
  const res = await search({keywords:keywords,limit:50,type:1});
  // 摘取歌曲列表
  coverSong(res.result.songs);
  loading.value = false;
}

async function coverSong(songlist: any[]) {
  const newSongs = songlist.map(song => ({
    id: song.id,
    name: song.name,
    albumPic: util.formatSongsPic(song.album.artist.img1v1Url,100),
    singer: song.artists.map(({ name, id }) => ({ name, id })),
    album: song.album.name,
    duration: song.duration,
    alia: song.alias[0] || '无别名',
    mvId: song.mvid,
    fee: song.fee,
    publishTime: song.album.publishTime,
    url: "https://music.163.com/song/media/outer/url?id="+song.id+".mp3"
  }));
  // 将新歌推送到反应式阵列中
  songs.push(...newSongs);
}

watch(() => props.keywords, (newKeywords) => {
  songs.length = 0; // 清除当前歌曲
  getList(newKeywords);
});

// 基于道具获取歌曲的初始调用
getList(props.keywords);
</script>
<style scoped lang="scss">
</style>
